<template>
	<view class="content background-color">
		<view v-for="(item,index) in comment.items" :key="index" class="item">
			<view>
				<image :src="item.image" class="product-image" mode="aspectFill" lazy-load></image>
				<view class="product-right">
					<view class="text_one product-name">{{item.productName}}</view>
					<view class="text_one product-sku">{{item.skuName}}</view>
				</view>
			</view>
			<view class="comment-position">
				<view class="pj-font">
					整体评价
				</view>
				<view class="level-view">
					<view class="level-item" v-for="(it,i) in options" :key="i">
						<image v-if="i!=item.commentItem.level" :src="it.icon" class="level-icon"></image>
						<image v-if="i==item.commentItem.level" :src="it.activeIcon" class="level-icon"></image>
						<view v-if="i!=item.commentItem.level" class="level-font">{{it.title}}</view>
						<view v-if="i==item.commentItem.level" class="level-active-font">{{it.title}}</view>
					</view>
				</view>
			</view>
			<view class="comment">
				{{item.commentItem.content}}
			</view>
			<image v-if="item.commentItem.image!=''" :src="item.commentItem.image" class="comment-image" mode="widthFix" @tap="preview(item.commentItem.image)"></image>
		</view>
	</view>
</template>

<script>
	import api from "../../common/api.js"
	import {
		getWithParam_
	} from "../../common/request.js";
	export default {
		data() {
			return {
				comment: {},
				options: [{
						title: "好评",
						icon: "../../static/icon/pl3.png",
						activeIcon: "../../static/icon/pl4.png"
					},
					{
						title: "中评",
						icon: "../../static/icon/pl1.png",
						activeIcon: "../../static/icon/pl2.png"
					}, {
						title: "差评",
						icon: "../../static/icon/pl1.png",
						activeIcon: "../../static/icon/pl2.png"
					}
				]
			}
		},
		onLoad(option) {
			this.initData(option.orderId)
		},
		methods: {
			preview(url) {
				var arr = []
				arr.push(url)
				uni.previewImage({
					urls: arr
				})

			},
			initData(id) {
				getWithParam_(api.COMMENT_DETAIL, {
					orderId: id
				}).then(res => {
					this.comment = res.data
				})
			}
		}

	}
</script>

<style>
	.comment-image {
		width: 350upx;
		height: 350upx;
		margin-top: 20upx;
	}

	.comment {
		margin-top: 20upx;
		color: #333333;
		padding: 20upx;
		background-color: #F2F3F5;
		min-height: 150upx;
		border-radius: 20upx;
	}

	.level-active-font {
		color: #fb0746;
		margin-left: 20upx;
	}

	.level-font {
		color: #8a8a8a;
		margin-left: 20upx;
	}

	.level-icon {
		width: 50upx;
		height: 50upx;
	}

	.level-item {
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.level-view {
		margin-left: 30upx;
		flex: 1;
	}

	.pj-font {
		font-size: 30upx;
		font-weight: 800;
		color: #333333;
	}

	.comment-position {
		margin-top: 20upx;
		align-items: center;
	}

	.background-color {
		background-color: #FFFFFF;
	}

	.product-sku {
		margin-top: 15upx;
		color: #888888;
		font-size: 24upx;
	}

	.product-name {
		color: #333333;
		margin-top: 10upx;
	}

	.product-image {
		width: 150upx;
		height: 150upx;
	}

	.item {
		padding: 20upx;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;
		border-bottom: 3upx solid #F2F3F5;
		flex-direction: column;
	}

	.product-right {
		margin-left: 20upx;
		flex-direction: column;
		width: 500upx;
	}
</style>
